<template>
	<view class="tm-poups ">
		
			<block v-if="position_sv != 'center'">
				<view v-show="value==true&&position_sv != 'center'" class="tm-poup " :class="[
						isFilter?'blur':'',
						position_sv == 'center' ? 'tm-poup-center' : ''
					]" @click="overClick" @touchmove.stop.prevent="stopMove" :style="{
						backgroundColor: overColor
					}">
					<!-- 内容 -->
					<scroll-view  @click.stop="" class="tm-poup-wk" scroll-y="true" :class="[
							position_sv == 'top'?'round-b-' + round:'',
							position_sv == 'bottom'?'round-t-' + round:'', 
							position_sv, show ? 'on' : 'off', 
							black_tmeme ? 'grey-darken-5 bk' : bgColor
						]" :style="{
							width: position_sv == 'top' || position_sv == 'bottom' ? '100%' : width_w,
							height: position_sv == 'right' || position_sv == 'left' ? '100%' : height_h
						}">
						<view  :clssStyle="[clssStyle]">
							<slot></slot>
						</view>
					</scroll-view>
				</view>
			</block>
		
		<view v-if="value===true&&position_sv == 'center'" class="tm-poup " :class="[
				isFilter?'blur':'',
				position_sv == 'center' ? 'tm-poup-center' : ''
			]" @click="overClick" @touchmove.stop.prevent="stopMove" :style="{
				backgroundColor: overColor
			}">
			<!-- 内容 -->
			<scroll-view  @click.stop="" class="tm-poup-wk" scroll-y="true" :class="[
					position_sv == 'top'?'round-b-' + round:'',
					position_sv == 'bottom'?'round-t-' + round:'', 
					position_sv,
					black_tmeme ? 'grey-darken-5 bk' : bgColor
				]" :style="{
					width: position_sv == 'top' || position_sv == 'bottom' ? '100%' : width_w,
					height: position_sv == 'right' || position_sv == 'left' ? '100%' : height_h
				}">
				<view  :clssStyle="[clssStyle]">
					<slot></slot>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	/**
	 * poup弹出层
	 * @description  poup弹出层，上下，左右方向。
	 * @property {Boolean} value = [true|false] 使用时value.sync可同步，也可不同步。等同于v-model
	 * @property {Boolea} v-model 显示和关闭。
	 * @property {String} position = [bottom|top|left|right|center] 方向可选bottom,left,right,top,center
	 * @property {Function} change 改变时会调用此函数，参数e等同于v-model和value
	 * @property {String|Number} width 宽，位置为left,right是起作用。可以是30%或者数字(单位upx)
	 * @property {String|Number} height 宽，位置为top,bottom是起作用。可以是30%或者数字(单位upx)
	 * @property {String|Number} round 圆角0-25
	 * @property {String|Boolean} black = [true|false] 暗黑模式
	 * @property {Boolean} over-close = [true|false] 是否点击遮罩关闭。
	 * @property {Boolean} is-filter = [true|false] 是否背景模糊
	 * @property {String} clss-style = [] 自定内容的类
	 * @property {String} bg-color = [white|blue] 默认：white,白色背景；请填写背景的主题色名称。
	 * @property {String} over-color = [] 默认：rgba(0,0,0,0.3), 遮罩层颜色值不是主题。
	 * @example <tm-poup height="85%"  v-model="show"></tm-poup>
	 */
	export default {
		name: 'tm-poup',
		props: {
			bgColor: {
				type: String,
				default: 'white'
			},
			// 遮罩层颜色。
			overColor: {
				type: String,
				default: 'rgba(0,0,0,0.3)'
			},
			black: {
				type: Boolean | String,
				default: null
			},
			clssStyle: {
				type: String,
				default: ''
			},
			value: {
				type: Boolean,
				default: false
			},
			// bottom,left,right,top
			position: {
				type: String,
				default: 'bottom'
			},
			round: {
				type: String | Number,
				default: '10'
			},
			width: {
				type: String | Number,
				default: '30%'
			},
			height: {
				type: String | Number,
				default: 220
			},
			overClose: {
				type: Boolean,
				default: true
			},
			isFilter:{
				type:Boolean,
				default:true,
			}
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		watch: {
			value: function(val) {
				this.$emit('change', val);
			},
			position:function(){
				this.position_sv = this.position
			}
		},
		computed: {
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			width_w: function() {
				let w = this.$TestUnit(this.width);
				let i = w.value;
				if (w.type == 'number') {
					i = w.value + 'px';
				}
				return i;
			},
			height_h: function() {
				let w = this.$TestUnit(this.height);
				let i = w.value;
				if (w.type == 'number') {
					i = w.value + 'px';
				}
				return i;
			},
			show: {
				get: function() {
					return this.aniOn;
				},
				set: function(val) {
					this.aniOn = val;
					
					
				}
			},
			
		},
		data() {
			return {
				aniOn: true,
				closeTimid: null,
				position_sv:this.position
			};
		},
		mounted() {},
		methods: {
			overClick() {
				if (!this.overClose) return;
				this.close();
			},
			close() {
				let t = this;
				if(this.position_sv!='center'){
					if (this.closeTimid) {
						clearTimeout(this.closeTimid);
						this.closeTimid = null;
					}
					this.show = false;
					this.closeTimid = setTimeout(function() {
						t.$emit('input', false);
						
						t.show = true;
						t.closeTimid = null;
					}, 360);
				}else{
					t.show = true;
					this.$emit('input', false);
				}
			},
			open() {
				let t = this;
				this.$nextTick(function(){
					t.$emit('input', true);
					t.show = true;
				})
			},
			stopMove(e) {}
		}
	};
</script>

<style lang="scss" scoped>
	.tm-poup {
		position: fixed;
		z-index: 452;
		width: 100%;
		height: 100%;
		min-height: 100%;
		min-width: 100%;
		overflow: hidden;
		top: 0;
		left: 0;
		
		&.blur{
			backdrop-filter:blur(10px);
		}
		&.on {
			animation: opta 0.5s;
		}

		&.off {
			animation: opta_off 0.5s;
		}

		.tm-poup-wk {
			position: absolute;
			overflow: hidden;

			&.bottom {
				bottom: -100%;
				left: 0;
				width: 100%;
				
				&.on {
					animation: bottomTtop 0.5s;
					bottom: 0;
				}

				&.off {
					animation: bottomTtop_off 0.5s;
				}
			}

			&.top {
				top: -100%;
				left: 0;
				width: 100%;
				
				&.on {
					animation: topTbottom 0.5s;
					top: 0;
				}

				&.off {
					animation: topTbottom_off 0.5s;
				}
			}

			&.left {
				top: 0;
				left: 100%;
				border-radius: 0 !important;
				
				&.on {
					animation: leftTright 0.5s;
					left: 0;
				}

				&.off {
					animation: leftTright_off 0.5s;
				}
			}

			&.right {
				top: 0;
				right: -100%;
				
				border-radius: 0 !important;

				&.on {
					animation: rightTleft 0.5s;
					right: 0;
				}

				&.off {
					animation: rightTleft_off 0.5s;
				}
			}

			&.center {
				border-radius: 0 !important;
				top:0;
				left:0;
				
				&.on {
					animation: Centerleft 0.5s;
				}

				&.off {
					animation: Centerleft_off 0.5s;
					
					
				}
			}
		}

		&.tm-poup-center {
			display: flex;
			justify-content: center;
			align-items: center;
			align-content: center;
			animation: none;
			.tm-poup-wk {
				position: static;
			}
			
		}
	}

	@keyframes opta {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes opta_off {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	@keyframes bottomTtop {
		from {
			bottom: -100%;
		}

		to {
			bottom: 0;
		}
	}

	@keyframes bottomTtop_off {
		from {
			bottom: 0;
		}

		to {
			bottom: -100%;
		}
	}

	@keyframes topTbottom {
		from {
			top: -100%;
		}

		to {
			top: 0;
		}
	}

	@keyframes topTbottom_off {
		from {
			top: 0;
		}

		to {
			top: -100%;
		}
	}

	@keyframes leftTright {
		from {
			left: -100%;
		}

		to {
			left: 0;
		}
	}

	@keyframes leftTright_off {
		from {
			left: 0;
		}

		to {
			left: -100%;
		}
	}

	@keyframes rightTleft {
		from {
			right: -100%;
		}

		to {
			right: 0;
		}
	}

	@keyframes rightTleft_off {
		from {
			right: 0;
		}

		to {
			right: -100%;
		}
	}

	@keyframes Centerleft {
		from {
			transform: scale(0.85);
		}

		to {
			transform: scale(1);
		}
	}

	@keyframes Center_off {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(0);
			
		}
	}
</style>
